<template>
  <div style="min-width: 1200px;width:100%;">
    <webHeader/>
    <nuxt/>
    <webFooter/>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import '@/plugins/element-ui'
import webHeader from '@/components/webHeader6'
import webFooter from '@/components/webFooter4'

export default {
  components: {
    webHeader,
    webFooter
  },
  middleware: ['site', 'themes'],
  computed: {
    ...mapState({
      site: (state) => state.site
    })
  },
  head() {
    return {
      title: this.site.systemName,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.site.remark
        },
        {
          hid: 'keywords',
          name: 'keywords',
          content: this.site.keyWord
        }
      ]
    }
  }
}
</script>

<style lang="scss">
@import 'element-ui/lib/theme-chalk/index.css';
@import 'assets/style/layer.css';
@import 'assets/style/layui.css';
html {
  font-family: Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: #333;
  // background-color: #f2f3f5;
}

html,
body,
ul,
p,
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  padding: 0;
}

main,
section,
aside,
header,
footer {
  display: block;
}

li {
  list-style: none;
}

* {
  box-sizing: border-box;
}

a {
  color: $--black-text-color;
  text-decoration: none;

  &:hover {
    // text-decoration: underline;
    // color: $--color-primary;
  }
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clear::after {
  content: '';
  display: block;
  visibility: hidden;
  clear: both;
}

em {
  font-style: normal;
}

.inp-wrapper {
  ul {
    li {
      & > span:first-child {
        width: 120px;
        display: inline-block;
        text-align: right;
      }

      .el-input {
        width: 300px;
        margin-left: 15px;
      }

      .el-textarea {
        width: 400px;
        margin-left: 15px;
        vertical-align: text-top;
      }
    }

    li + li {
      margin-top: 15px;
    }
  }

  .el-button {
    margin: 15px 0 15px 135px;
  }
}

.el-table {
  font-size: 12px;

  th,
  td {
    padding: 8px 0;
  }

  .cell {
    line-height: 1.5;
  }
}

html {
  height: 100%;
  background: $--light-color-primary;
}

body,
#__nuxt,
#__layout,
#__layout > div:first-child {
  height: 100%;
}

.main-w {
  width: 1190px;
  margin: 0 auto;
}

h2 {
  // color: white;
  // font-size: 18px;
  // line-height: 35px;
  // background-size: auto 100%;
  // border-bottom: 1px solid $--light-color-primary;

  & > i {
    font-size: 13px;
    vertical-align: middle;
    margin: 0 8px 0 5px;
    color: $--basic-orange;
  }

  a {
    float: right;
    font-size: 12px;
    margin-right: 10px;
    color: $--color-primary;
  }
}

.main-section {
  position: relative;
}

.sec {
  min-height: 400px;
}

.top-bg {
  position: absolute;
  top: 0;
  width: 100%;
  min-width: 1190px;
  height: 350px;
  background: $--deep-color-primary;
  z-index: 1;
}
</style>
